{% extends "base.html" %}

{% block main %}
{% if pet %}
    	<div id="pet">
    		<div class="header">
	    		<h2>{{ pet.name }}</h2>
	    		<div class="stats">
                    {{ pet.animal }}
                    {% if pet.breeds %}{% for breed in pet.breeds %} &bull; {{ breed }} {% endfor %}{% endif %}
                    {% if pet.sex %} &bull; {{ pet.sex }} {% endif %}
                    {% if pet.age %} &bull; {{ pet.age }} {% endif %}
                </div>
    		</div><!-- close header -->
    		<div id="images" class="images clearfix">
				<div class="slides_container"> 
				    {% for id, photo in pet.photos.items %}
					<a href="{{ photo.x }}" target="_blank"><img src="{{ photo.x }}" alt="{{ pet.name }}'s {{ id }} Photo" {% boximg photo.info.1 photo.info.2 570 270 %} /></a>
					{% endfor %}
				</div>
				<a href="#" class="prev"><img src="images/icn_slides_arrow-prev.png" width="24" height="43" alt="Arrow Prev" /></a> 
				<a href="#" class="next"><img src="images/icn_slides_arrow-next.png" width="24" height="43" alt="Arrow Next" /></a> 
    		</div><!-- close images -->
    		<div id="shareBar" class="socialMedia clearfix">
                <a href="mailto:?subject={{ pet.animal|urlencode }} {{ pet.name|urlencode }} at {{ shelter_name|urlencode }}&body=Meet {{ pet.animal|urlencode }} {{ pet.name|urlencode }} at {{ shelter_name }}: {{ url|urlencode }}" class="email"></a>
                <a href="http://twitter.com/home?status=Meet {{ pet.animal|urlencode }} {{ pet.name|urlencode }} at {{ shelter_name|urlencode }} {{ url|urlencode }}" class="twitter" target="_blank"></a>
                <a href="http://www.facebook.com/sharer.php?u={{ url|urlencode }}&t=Meet {{ pet.animal|urlencode }} {{ pet.name|urlencode }} at {{ shelter_name|urlencode }}" class="facebook" target="_blank"></a>
    		</div>
    		<div id="description">
    			<h3>Description</h3>
    			<p>{{ pet.description|safe }}</p>
    			<p class="link"><a href="http://www.petfinder.com/petdetail/{{ pet.id }}" target="_blank">See on Petfinder.com &raquo;</a></p>
    		</div><!-- close description -->
    		<div class="shelterInfo">
    			<h3>Adoption</h3>
    			<p>Adopt one of our special animals and save not just one but two lives! You save the life of the animal that you adopt, and you make room for us to bring another homeless animal into our foster network in hopes of finding a loving, forever family and living a long and happy life.</p>
    			<p>If you are ready to adopt a pet, simply fill out our online application to start the process. This information and consultation with a {{ shelter_name }} representative are designed to help you find the pet most compatible with your lifestyle.</p>
                <a class="btnAdoption" href="/application-{{ pet.name|slugify }}-{{ pet.id }}.html" class="btnAdopt">Adopt {{ pet.name }}!</a>
    			<h3>Lifesaving Sponsorship</h3>
    			<p>Become a sponsor to one of our foster animals and you will be helping us support one of our furry friends while they wait for a permanent home. As a no-kill organization, some of our animals have spent their lives under our care without ever being considered for adoption. This would not be possible if it weren't for the kindness of your contributions. </p>
    			<p>It's only $100 to sponsor one of these precious and special animals and give him or her a chance at a long and happy life. Thank you!</p>
                <a class="btnDonation" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business={{ shelter_email_donations|urlencode }}&lc=US&item_name={{ shelter_name|urlencode }}{{ " - Lifesaving Sponsorship for "|urlencode }}{{ pet.name|urlencode }}&item_number={{ pet.name|urlencode }}:{{ pet.id }}&amount=100&no_note=1&no_shipping=1&rm=1&return={{ url|urlencode }}&cancel_return={{ url|urlencode }}&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted&image_url={{ logo|urlencode }}" class="btnSponsor">Sponsor {{ pet.name }}!</a>
    		</div>
    		<div class="shelterAdoptions clearfix">
				<p class="link"><a href="/adoptions.html">{% if back %}Back to{% else %}Go to{% endif %} Adoptions &raquo;</a></p>
			</div>
    	</div><!-- close pet -->
    	<div class="sidebar">
        	<div class="featureAd">
                <img src="https://www.google.com/adsense/static/en_GB/images/300x250_img.jpg" alt="AD" />
            </div><!-- close featureAd -->
            <div class="module">
				<script src="http://widgets.twimg.com/j/2/widget.js"></script>
				<script>
				new TWTR.Widget({
				  version: 2,
				  type: 'profile',
				  rpp: 5,
				  interval: 5000,
				  width: 'auto',
				  height: 300,
				  theme: {
				    shell: {
				      background: '#dd5f24',
				      color: '#ffffff'
				    },
				    tweets: {
				      background: '#ffffff',
				      color: '#000000',
				      links: '#dd5f24'
				    }
				  },
				  features: {
				    scrollbar: true,
				    loop: false,
				    live: true,
				    hashtags: true,
				    timestamp: true,
				    avatars: false,
				    behavior: 'all'
				  }
				}).render().setUser('{{ shelter_twitter_user }}').start();
				</script>
			</div>
	        <div class="module">
		        <iframe src="http://www.facebook.com/plugins/likebox.php?href={{ shelter_facebook|urlencode }}&amp;width=302&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=360" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:302px; height:370px;" allowTransparency="true"></iframe>
			</div>
        </div><!-- close sidebar -->
{% endif %}
{% endblock main %}

{% block javascript %}
{{ block.super }}
<script src="js/jquery.easing.min.js"></script> 
<script src="js/jquery.slides.min.js"></script> 
<script> 
	$(function(){
		$('#images').slides({
			preload: true,
			preloadImage: 'images/slides_loading.gif',
			play: 5000,
			pause: 2500,
			hoverPause: true
		});
	});
</script> 
{% endblock javascript %}


